<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4477288" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ae;</span>
                <div class="name">exchange-对调</div>
                <div class="code-name">&amp;#xe6ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6af;</span>
                <div class="name">cropping-裁剪</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6aa;</span>
                <div class="name">rotate-旋转</div>
                <div class="code-name">&amp;#xe6aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ab;</span>
                <div class="name">right rotation-右旋转</div>
                <div class="code-name">&amp;#xe6ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ac;</span>
                <div class="name">flip horizontal-水平翻转</div>
                <div class="code-name">&amp;#xe6ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ad;</span>
                <div class="name">flip vertical-垂直翻转</div>
                <div class="code-name">&amp;#xe6ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a9;</span>
                <div class="name">drag-拖动</div>
                <div class="code-name">&amp;#xe6a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a8;</span>
                <div class="name">no network-无网络</div>
                <div class="code-name">&amp;#xe6a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a7;</span>
                <div class="name">refresh-刷新</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a6;</span>
                <div class="name">install-安装</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a5;</span>
                <div class="name">ai</div>
                <div class="code-name">&amp;#xe6a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69e;</span>
                <div class="name">calendar-日历</div>
                <div class="code-name">&amp;#xe69e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69f;</span>
                <div class="name">alignBothEnds-两端对齐</div>
                <div class="code-name">&amp;#xe69f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a0;</span>
                <div class="name">arrange-整理</div>
                <div class="code-name">&amp;#xe6a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a1;</span>
                <div class="name">angle-角度</div>
                <div class="code-name">&amp;#xe6a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a2;</span>
                <div class="name">albumDesign-相册设计</div>
                <div class="code-name">&amp;#xe6a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a3;</span>
                <div class="name">addPicture-添加图片</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a4;</span>
                <div class="name">adjust-调节的</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68f;</span>
                <div class="name">dunhao-顿号</div>
                <div class="code-name">&amp;#xe68f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe690;</span>
                <div class="name">cleanUp-清除</div>
                <div class="code-name">&amp;#xe690;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe691;</span>
                <div class="name">cropping-裁剪</div>
                <div class="code-name">&amp;#xe691;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe692;</span>
                <div class="name">choice-unselected-未选</div>
                <div class="code-name">&amp;#xe692;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe693;</span>
                <div class="name">choice-selected-选中</div>
                <div class="code-name">&amp;#xe693;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe694;</span>
                <div class="name">copy-复制</div>
                <div class="code-name">&amp;#xe694;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe695;</span>
                <div class="name">close-闭合选择</div>
                <div class="code-name">&amp;#xe695;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">background-背景</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe696;</span>
                <div class="name">contrast-对比的</div>
                <div class="code-name">&amp;#xe696;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe697;</span>
                <div class="name">cancel-取消的</div>
                <div class="code-name">&amp;#xe697;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe698;</span>
                <div class="name">checkMark-对勾</div>
                <div class="code-name">&amp;#xe698;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe699;</span>
                <div class="name">cancel-取消</div>
                <div class="code-name">&amp;#xe699;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">amplify-放大</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69a;</span>
                <div class="name">bold-加粗</div>
                <div class="code-name">&amp;#xe69a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69b;</span>
                <div class="name">centerAligned-居中对齐</div>
                <div class="code-name">&amp;#xe69b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69c;</span>
                <div class="name">back-返回</div>
                <div class="code-name">&amp;#xe69c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69d;</span>
                <div class="name">adjust-调节</div>
                <div class="code-name">&amp;#xe69d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe686;</span>
                <div class="name">daub-涂抹</div>
                <div class="code-name">&amp;#xe686;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe687;</span>
                <div class="name">expand-展开</div>
                <div class="code-name">&amp;#xe687;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe688;</span>
                <div class="name">display-显示</div>
                <div class="code-name">&amp;#xe688;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe689;</span>
                <div class="name">delete-删除</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68a;</span>
                <div class="name">crowd-人群</div>
                <div class="code-name">&amp;#xe68a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68b;</span>
                <div class="name">dunhao-顿号填充</div>
                <div class="code-name">&amp;#xe68b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68c;</span>
                <div class="name">diamond-钻石</div>
                <div class="code-name">&amp;#xe68c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68d;</span>
                <div class="name">delete-删除的</div>
                <div class="code-name">&amp;#xe68d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">contrast-对比</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">close-闭合</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68e;</span>
                <div class="name">dress-服饰</div>
                <div class="code-name">&amp;#xe68e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">erase-擦除</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe681;</span>
                <div class="name">filter-滤镜</div>
                <div class="code-name">&amp;#xe681;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe682;</span>
                <div class="name">edit-编辑</div>
                <div class="code-name">&amp;#xe682;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe683;</span>
                <div class="name">export-导出</div>
                <div class="code-name">&amp;#xe683;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe684;</span>
                <div class="name">exportList-导出列表</div>
                <div class="code-name">&amp;#xe684;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe685;</span>
                <div class="name">feedBack-意见反馈</div>
                <div class="code-name">&amp;#xe685;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66f;</span>
                <div class="name">launch-展开</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe670;</span>
                <div class="name">hide-隐藏</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe671;</span>
                <div class="name">italic-斜体</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe672;</span>
                <div class="name">increase-添加</div>
                <div class="code-name">&amp;#xe672;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
                <div class="name">import-导入</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe674;</span>
                <div class="name">ImageEditing-图片编辑</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
                <div class="name">image-图片的</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe676;</span>
                <div class="name">hand-手</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe677;</span>
                <div class="name">history-历史记录</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe678;</span>
                <div class="name">hand-手掌</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">gesture-手势</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe679;</span>
                <div class="name">gift-礼物</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67a;</span>
                <div class="name">home-首页</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67b;</span>
                <div class="name">folder-文件夹</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67c;</span>
                <div class="name">film-影片</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67d;</span>
                <div class="name">folder-文件夹填充</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67e;</span>
                <div class="name">garbageBin-垃圾箱</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67f;</span>
                <div class="name">expression-表情</div>
                <div class="code-name">&amp;#xe67f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe680;</span>
                <div class="name">funnel-漏斗</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe662;</span>
                <div class="name">nextStep-下一步</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">idPhoto-证件照</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe663;</span>
                <div class="name">move-移动</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">locking-锁定中</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe664;</span>
                <div class="name">minus-减号</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">more-更多</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">mask-面具</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">facialDetection-人脸检测</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">intelligentPPresets-智能预设</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe668;</span>
                <div class="name">manage-管理</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">leftJustifying-左对齐</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">lineSpace-行间距</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66b;</span>
                <div class="name">locking-锁定</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">exportGraph-导出图</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66c;</span>
                <div class="name">liquefying-液化</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66d;</span>
                <div class="name">loading-加载</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">help-帮助</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66e;</span>
                <div class="name">intelligentAdjustment-智能调整</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">portraitBeauty-人像美容新</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">profilePicture-头像</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">plus-加号</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe653;</span>
                <div class="name">portraitBeauty-人像美容</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">profilePicture-头像的</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">portraitBeauty-人像美容大的</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">noContent-无内容</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">pictureEdit-图片编辑</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe658;</span>
                <div class="name">placeOnTop-置于顶层</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">picture-图片填充</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65a;</span>
                <div class="name">play-播放</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">moveUp-上移</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65b;</span>
                <div class="name">picture-图片</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">overturn-翻转</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">member-会员</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">pencil-铅笔</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">merge-合并</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65f;</span>
                <div class="name">noSky-天空无图</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">manageList-管理列表</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
                <div class="name">more-更多的</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">setUp-设置</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe643;</span>
                <div class="name">star-星星</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">search-搜索</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">select-选中对勾</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">select-选中全</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">select-选中的</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
                <div class="name">rotate-旋转</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
                <div class="name">rightAlignment-右对齐</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">questionMark-问号</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64a;</span>
                <div class="name">remarks-备注</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64b;</span>
                <div class="name">regionalProtection-区域保护</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
                <div class="name">resetting-重置</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">preset-预设</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">redo-重做</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64e;</span>
                <div class="name">radio-unselected-未选</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64f;</span>
                <div class="name">proportion-比例</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">radio-select-选中</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">underline-下划线</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">verticalText-竖版文字</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">withdraw-撤回</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe634;</span>
                <div class="name">wechat-微信</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">view-视图</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">win-close-关闭</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">Template-模版</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe637;</span>
                <div class="name">unlock-解锁</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">unlock-解锁的</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe639;</span>
                <div class="name">up-向上</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">strikethrough-删除线</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">triangle-三角</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">text-字体</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">topping-置顶</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">subtraction-减去</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">suspend-暂停的</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">suspend-暂停</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">sendToBack-置于底层</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
                <div class="name">sourceMaterial-素材</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">win-maximize-最大化</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">select-选中</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">wordSpace-字间距</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">scale-缩放</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">win-reduction-还原</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">win-minimize-最小化</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1724234682784') format('woff2'),
       url('iconfont.woff?t=1724234682784') format('woff'),
       url('iconfont.ttf?t=1724234682784') format('truetype'),
       url('iconfont.svg?t=1724234682784#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-exchange-duitiao"></span>
            <div class="name">
              exchange-对调
            </div>
            <div class="code-name">.icon-exchange-duitiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cropping-caijian1"></span>
            <div class="name">
              cropping-裁剪
            </div>
            <div class="code-name">.icon-cropping-caijian1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rotate-xuanzhuan1"></span>
            <div class="name">
              rotate-旋转
            </div>
            <div class="code-name">.icon-rotate-xuanzhuan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-rightrotation-youxuanzhuan"></span>
            <div class="name">
              right rotation-右旋转
            </div>
            <div class="code-name">.icon-a-rightrotation-youxuanzhuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-fliphorizontal-shuipingfanzhuan"></span>
            <div class="name">
              flip horizontal-水平翻转
            </div>
            <div class="code-name">.icon-a-fliphorizontal-shuipingfanzhuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-flipvertical-chuizhifanzhuan"></span>
            <div class="name">
              flip vertical-垂直翻转
            </div>
            <div class="code-name">.icon-a-flipvertical-chuizhifanzhuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-drag-tuodong"></span>
            <div class="name">
              drag-拖动
            </div>
            <div class="code-name">.icon-drag-tuodong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-nonetwork-wuwangluo"></span>
            <div class="name">
              no network-无网络
            </div>
            <div class="code-name">.icon-a-nonetwork-wuwangluo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-refresh-shuaxin"></span>
            <div class="name">
              refresh-刷新
            </div>
            <div class="code-name">.icon-refresh-shuaxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-install-anzhuang"></span>
            <div class="name">
              install-安装
            </div>
            <div class="code-name">.icon-install-anzhuang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ai"></span>
            <div class="name">
              ai
            </div>
            <div class="code-name">.icon-ai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-calendar-rili"></span>
            <div class="name">
              calendar-日历
            </div>
            <div class="code-name">.icon-calendar-rili
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-alignBothEnds-liangduanduiqi"></span>
            <div class="name">
              alignBothEnds-两端对齐
            </div>
            <div class="code-name">.icon-alignBothEnds-liangduanduiqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrange-zhengli"></span>
            <div class="name">
              arrange-整理
            </div>
            <div class="code-name">.icon-arrange-zhengli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-angle-jiaodu"></span>
            <div class="name">
              angle-角度
            </div>
            <div class="code-name">.icon-angle-jiaodu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-albumDesign-xiangcesheji"></span>
            <div class="name">
              albumDesign-相册设计
            </div>
            <div class="code-name">.icon-albumDesign-xiangcesheji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-addPicture-tianjiatupian"></span>
            <div class="name">
              addPicture-添加图片
            </div>
            <div class="code-name">.icon-addPicture-tianjiatupian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-adjust-tiaojiede"></span>
            <div class="name">
              adjust-调节的
            </div>
            <div class="code-name">.icon-adjust-tiaojiede
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dunhao-dunhao"></span>
            <div class="name">
              dunhao-顿号
            </div>
            <div class="code-name">.icon-dunhao-dunhao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cleanUp-qingchu"></span>
            <div class="name">
              cleanUp-清除
            </div>
            <div class="code-name">.icon-cleanUp-qingchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cropping-caijian"></span>
            <div class="name">
              cropping-裁剪
            </div>
            <div class="code-name">.icon-cropping-caijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-choice-unselected-weixuan"></span>
            <div class="name">
              choice-unselected-未选
            </div>
            <div class="code-name">.icon-choice-unselected-weixuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-choice-selected-xuanzhong"></span>
            <div class="name">
              choice-selected-选中
            </div>
            <div class="code-name">.icon-choice-selected-xuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-copy-fuzhi"></span>
            <div class="name">
              copy-复制
            </div>
            <div class="code-name">.icon-copy-fuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close-bihexuanze"></span>
            <div class="name">
              close-闭合选择
            </div>
            <div class="code-name">.icon-close-bihexuanze
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-background-beijing"></span>
            <div class="name">
              background-背景
            </div>
            <div class="code-name">.icon-background-beijing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-contrast-duibide"></span>
            <div class="name">
              contrast-对比的
            </div>
            <div class="code-name">.icon-contrast-duibide
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cancel-quxiaode"></span>
            <div class="name">
              cancel-取消的
            </div>
            <div class="code-name">.icon-cancel-quxiaode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-checkMark-duigou"></span>
            <div class="name">
              checkMark-对勾
            </div>
            <div class="code-name">.icon-checkMark-duigou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cancel-quxiao"></span>
            <div class="name">
              cancel-取消
            </div>
            <div class="code-name">.icon-cancel-quxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-amplify-fangda"></span>
            <div class="name">
              amplify-放大
            </div>
            <div class="code-name">.icon-amplify-fangda
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bold-jiacu"></span>
            <div class="name">
              bold-加粗
            </div>
            <div class="code-name">.icon-bold-jiacu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-centerAligned-juzhongduiqi"></span>
            <div class="name">
              centerAligned-居中对齐
            </div>
            <div class="code-name">.icon-centerAligned-juzhongduiqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-back-fanhui"></span>
            <div class="name">
              back-返回
            </div>
            <div class="code-name">.icon-back-fanhui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-adjust-tiaojie"></span>
            <div class="name">
              adjust-调节
            </div>
            <div class="code-name">.icon-adjust-tiaojie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daub-tumo"></span>
            <div class="name">
              daub-涂抹
            </div>
            <div class="code-name">.icon-daub-tumo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-expand-zhankai"></span>
            <div class="name">
              expand-展开
            </div>
            <div class="code-name">.icon-expand-zhankai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-display-xianshi"></span>
            <div class="name">
              display-显示
            </div>
            <div class="code-name">.icon-display-xianshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-delete-shanchu"></span>
            <div class="name">
              delete-删除
            </div>
            <div class="code-name">.icon-delete-shanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-crowd-renqun"></span>
            <div class="name">
              crowd-人群
            </div>
            <div class="code-name">.icon-crowd-renqun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dunhao-dunhaotianchong"></span>
            <div class="name">
              dunhao-顿号填充
            </div>
            <div class="code-name">.icon-dunhao-dunhaotianchong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-diamond-zuanshi"></span>
            <div class="name">
              diamond-钻石
            </div>
            <div class="code-name">.icon-diamond-zuanshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-delete-shanchude"></span>
            <div class="name">
              delete-删除的
            </div>
            <div class="code-name">.icon-delete-shanchude
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-contrast-duibi"></span>
            <div class="name">
              contrast-对比
            </div>
            <div class="code-name">.icon-contrast-duibi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close-bihe"></span>
            <div class="name">
              close-闭合
            </div>
            <div class="code-name">.icon-close-bihe
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dress-fushi"></span>
            <div class="name">
              dress-服饰
            </div>
            <div class="code-name">.icon-dress-fushi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-erase-cachu"></span>
            <div class="name">
              erase-擦除
            </div>
            <div class="code-name">.icon-erase-cachu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-filter-lvjing"></span>
            <div class="name">
              filter-滤镜
            </div>
            <div class="code-name">.icon-filter-lvjing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-edit-bianji"></span>
            <div class="name">
              edit-编辑
            </div>
            <div class="code-name">.icon-edit-bianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-export-daochu"></span>
            <div class="name">
              export-导出
            </div>
            <div class="code-name">.icon-export-daochu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-exportList-daochuliebiao"></span>
            <div class="name">
              exportList-导出列表
            </div>
            <div class="code-name">.icon-exportList-daochuliebiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-feedBack-yijianfankui"></span>
            <div class="name">
              feedBack-意见反馈
            </div>
            <div class="code-name">.icon-feedBack-yijianfankui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-launch-zhankai"></span>
            <div class="name">
              launch-展开
            </div>
            <div class="code-name">.icon-launch-zhankai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hide-yincang"></span>
            <div class="name">
              hide-隐藏
            </div>
            <div class="code-name">.icon-hide-yincang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-italic-xieti"></span>
            <div class="name">
              italic-斜体
            </div>
            <div class="code-name">.icon-italic-xieti
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-increase-tianjia"></span>
            <div class="name">
              increase-添加
            </div>
            <div class="code-name">.icon-increase-tianjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-import-daoru"></span>
            <div class="name">
              import-导入
            </div>
            <div class="code-name">.icon-import-daoru
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ImageEditing-tupianbianji"></span>
            <div class="name">
              ImageEditing-图片编辑
            </div>
            <div class="code-name">.icon-ImageEditing-tupianbianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-image-tupiande"></span>
            <div class="name">
              image-图片的
            </div>
            <div class="code-name">.icon-image-tupiande
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hand-shou"></span>
            <div class="name">
              hand-手
            </div>
            <div class="code-name">.icon-hand-shou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-history-lishijilu"></span>
            <div class="name">
              history-历史记录
            </div>
            <div class="code-name">.icon-history-lishijilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hand-shouzhang"></span>
            <div class="name">
              hand-手掌
            </div>
            <div class="code-name">.icon-hand-shouzhang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gesture-shoushi"></span>
            <div class="name">
              gesture-手势
            </div>
            <div class="code-name">.icon-gesture-shoushi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gift-liwu"></span>
            <div class="name">
              gift-礼物
            </div>
            <div class="code-name">.icon-gift-liwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-home-shouye"></span>
            <div class="name">
              home-首页
            </div>
            <div class="code-name">.icon-home-shouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folder-wenjianjia"></span>
            <div class="name">
              folder-文件夹
            </div>
            <div class="code-name">.icon-folder-wenjianjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-film-yingpian"></span>
            <div class="name">
              film-影片
            </div>
            <div class="code-name">.icon-film-yingpian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folder-wenjianjiatianchong"></span>
            <div class="name">
              folder-文件夹填充
            </div>
            <div class="code-name">.icon-folder-wenjianjiatianchong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-garbageBin-lajixiang"></span>
            <div class="name">
              garbageBin-垃圾箱
            </div>
            <div class="code-name">.icon-garbageBin-lajixiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-expression-biaoqing"></span>
            <div class="name">
              expression-表情
            </div>
            <div class="code-name">.icon-expression-biaoqing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-funnel-loudou"></span>
            <div class="name">
              funnel-漏斗
            </div>
            <div class="code-name">.icon-funnel-loudou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-nextStep-xiayibu"></span>
            <div class="name">
              nextStep-下一步
            </div>
            <div class="code-name">.icon-nextStep-xiayibu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-idPhoto-zhengjianzhao"></span>
            <div class="name">
              idPhoto-证件照
            </div>
            <div class="code-name">.icon-idPhoto-zhengjianzhao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-move-yidong"></span>
            <div class="name">
              move-移动
            </div>
            <div class="code-name">.icon-move-yidong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-locking-suodingzhong"></span>
            <div class="name">
              locking-锁定中
            </div>
            <div class="code-name">.icon-locking-suodingzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-minus-jianhao"></span>
            <div class="name">
              minus-减号
            </div>
            <div class="code-name">.icon-minus-jianhao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-more-gengduo"></span>
            <div class="name">
              more-更多
            </div>
            <div class="code-name">.icon-more-gengduo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mask-mianju"></span>
            <div class="name">
              mask-面具
            </div>
            <div class="code-name">.icon-mask-mianju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-facialDetection-renlianjiance"></span>
            <div class="name">
              facialDetection-人脸检测
            </div>
            <div class="code-name">.icon-facialDetection-renlianjiance
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-intelligentPPresets-zhinengyushe"></span>
            <div class="name">
              intelligentPPresets-智能预设
            </div>
            <div class="code-name">.icon-intelligentPPresets-zhinengyushe
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-manage-guanli"></span>
            <div class="name">
              manage-管理
            </div>
            <div class="code-name">.icon-manage-guanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-leftJustifying-zuoduiqi"></span>
            <div class="name">
              leftJustifying-左对齐
            </div>
            <div class="code-name">.icon-leftJustifying-zuoduiqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lineSpace-hangjianju"></span>
            <div class="name">
              lineSpace-行间距
            </div>
            <div class="code-name">.icon-lineSpace-hangjianju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-locking-suoding"></span>
            <div class="name">
              locking-锁定
            </div>
            <div class="code-name">.icon-locking-suoding
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-exportGraph-daochutu"></span>
            <div class="name">
              exportGraph-导出图
            </div>
            <div class="code-name">.icon-exportGraph-daochutu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-liquefying-yehua"></span>
            <div class="name">
              liquefying-液化
            </div>
            <div class="code-name">.icon-liquefying-yehua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-loading-jiazai"></span>
            <div class="name">
              loading-加载
            </div>
            <div class="code-name">.icon-loading-jiazai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-help-bangzhu"></span>
            <div class="name">
              help-帮助
            </div>
            <div class="code-name">.icon-help-bangzhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-intelligentAdjustment-zhinengtiaozheng"></span>
            <div class="name">
              intelligentAdjustment-智能调整
            </div>
            <div class="code-name">.icon-intelligentAdjustment-zhinengtiaozheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-portraitBeauty-renxiangmeirongxin"></span>
            <div class="name">
              portraitBeauty-人像美容新
            </div>
            <div class="code-name">.icon-portraitBeauty-renxiangmeirongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-profilePicture-touxiang"></span>
            <div class="name">
              profilePicture-头像
            </div>
            <div class="code-name">.icon-profilePicture-touxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-plus-jiahao"></span>
            <div class="name">
              plus-加号
            </div>
            <div class="code-name">.icon-plus-jiahao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-portraitBeauty-renxiangmeirong"></span>
            <div class="name">
              portraitBeauty-人像美容
            </div>
            <div class="code-name">.icon-portraitBeauty-renxiangmeirong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-profilePicture-touxiangde"></span>
            <div class="name">
              profilePicture-头像的
            </div>
            <div class="code-name">.icon-profilePicture-touxiangde
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-portraitBeauty-renxiangmeirongdade"></span>
            <div class="name">
              portraitBeauty-人像美容大的
            </div>
            <div class="code-name">.icon-portraitBeauty-renxiangmeirongdade
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-noContent-wuneirong"></span>
            <div class="name">
              noContent-无内容
            </div>
            <div class="code-name">.icon-noContent-wuneirong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pictureEdit-tupianbianji"></span>
            <div class="name">
              pictureEdit-图片编辑
            </div>
            <div class="code-name">.icon-pictureEdit-tupianbianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-placeOnTop-zhiyudingceng"></span>
            <div class="name">
              placeOnTop-置于顶层
            </div>
            <div class="code-name">.icon-placeOnTop-zhiyudingceng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-picture-tupiantianchong"></span>
            <div class="name">
              picture-图片填充
            </div>
            <div class="code-name">.icon-picture-tupiantianchong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-play-bofang"></span>
            <div class="name">
              play-播放
            </div>
            <div class="code-name">.icon-play-bofang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moveUp-shangyi"></span>
            <div class="name">
              moveUp-上移
            </div>
            <div class="code-name">.icon-moveUp-shangyi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-picture-tupian"></span>
            <div class="name">
              picture-图片
            </div>
            <div class="code-name">.icon-picture-tupian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-overturn-fanzhuan"></span>
            <div class="name">
              overturn-翻转
            </div>
            <div class="code-name">.icon-overturn-fanzhuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-member-huiyuan"></span>
            <div class="name">
              member-会员
            </div>
            <div class="code-name">.icon-member-huiyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pencil-qianbi"></span>
            <div class="name">
              pencil-铅笔
            </div>
            <div class="code-name">.icon-pencil-qianbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-merge-hebing"></span>
            <div class="name">
              merge-合并
            </div>
            <div class="code-name">.icon-merge-hebing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-noSky-tiankongwutu"></span>
            <div class="name">
              noSky-天空无图
            </div>
            <div class="code-name">.icon-noSky-tiankongwutu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-manageList-guanliliebiao"></span>
            <div class="name">
              manageList-管理列表
            </div>
            <div class="code-name">.icon-manageList-guanliliebiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-more-gengduode"></span>
            <div class="name">
              more-更多的
            </div>
            <div class="code-name">.icon-more-gengduode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-setUp-shezhi"></span>
            <div class="name">
              setUp-设置
            </div>
            <div class="code-name">.icon-setUp-shezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-star-xingxing"></span>
            <div class="name">
              star-星星
            </div>
            <div class="code-name">.icon-star-xingxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-search-sousuo"></span>
            <div class="name">
              search-搜索
            </div>
            <div class="code-name">.icon-search-sousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-select-xuanzhongduigou"></span>
            <div class="name">
              select-选中对勾
            </div>
            <div class="code-name">.icon-select-xuanzhongduigou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-select-xuanzhongquan"></span>
            <div class="name">
              select-选中全
            </div>
            <div class="code-name">.icon-select-xuanzhongquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-select-xuanzhongde"></span>
            <div class="name">
              select-选中的
            </div>
            <div class="code-name">.icon-select-xuanzhongde
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rotate-xuanzhuan"></span>
            <div class="name">
              rotate-旋转
            </div>
            <div class="code-name">.icon-rotate-xuanzhuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rightAlignment-youduiqi"></span>
            <div class="name">
              rightAlignment-右对齐
            </div>
            <div class="code-name">.icon-rightAlignment-youduiqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-questionMark-wenhao"></span>
            <div class="name">
              questionMark-问号
            </div>
            <div class="code-name">.icon-questionMark-wenhao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-remarks-beizhu"></span>
            <div class="name">
              remarks-备注
            </div>
            <div class="code-name">.icon-remarks-beizhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-regionalProtection-quyubaohu"></span>
            <div class="name">
              regionalProtection-区域保护
            </div>
            <div class="code-name">.icon-regionalProtection-quyubaohu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-resetting-zhongzhi"></span>
            <div class="name">
              resetting-重置
            </div>
            <div class="code-name">.icon-resetting-zhongzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-preset-yushe"></span>
            <div class="name">
              preset-预设
            </div>
            <div class="code-name">.icon-preset-yushe
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-redo-zhongzuo"></span>
            <div class="name">
              redo-重做
            </div>
            <div class="code-name">.icon-redo-zhongzuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-radio-unselected-weixuan"></span>
            <div class="name">
              radio-unselected-未选
            </div>
            <div class="code-name">.icon-radio-unselected-weixuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-proportion-bili"></span>
            <div class="name">
              proportion-比例
            </div>
            <div class="code-name">.icon-proportion-bili
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-radio-select-xuanzhong"></span>
            <div class="name">
              radio-select-选中
            </div>
            <div class="code-name">.icon-radio-select-xuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-underline-xiahuaxian"></span>
            <div class="name">
              underline-下划线
            </div>
            <div class="code-name">.icon-underline-xiahuaxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-verticalText-shubanwenzi"></span>
            <div class="name">
              verticalText-竖版文字
            </div>
            <div class="code-name">.icon-verticalText-shubanwenzi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-withdraw-chehui"></span>
            <div class="name">
              withdraw-撤回
            </div>
            <div class="code-name">.icon-withdraw-chehui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wechat-weixin"></span>
            <div class="name">
              wechat-微信
            </div>
            <div class="code-name">.icon-wechat-weixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-view-shitu"></span>
            <div class="name">
              view-视图
            </div>
            <div class="code-name">.icon-view-shitu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-win-close-guanbi"></span>
            <div class="name">
              win-close-关闭
            </div>
            <div class="code-name">.icon-win-close-guanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Template-moban"></span>
            <div class="name">
              Template-模版
            </div>
            <div class="code-name">.icon-Template-moban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-unlock-jiesuo"></span>
            <div class="name">
              unlock-解锁
            </div>
            <div class="code-name">.icon-unlock-jiesuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-unlock-jiesuode"></span>
            <div class="name">
              unlock-解锁的
            </div>
            <div class="code-name">.icon-unlock-jiesuode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-up-xiangshang"></span>
            <div class="name">
              up-向上
            </div>
            <div class="code-name">.icon-up-xiangshang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-strikethrough-shanchuxian"></span>
            <div class="name">
              strikethrough-删除线
            </div>
            <div class="code-name">.icon-strikethrough-shanchuxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-triangle-sanjiao"></span>
            <div class="name">
              triangle-三角
            </div>
            <div class="code-name">.icon-triangle-sanjiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-text-ziti"></span>
            <div class="name">
              text-字体
            </div>
            <div class="code-name">.icon-text-ziti
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-topping-zhiding"></span>
            <div class="name">
              topping-置顶
            </div>
            <div class="code-name">.icon-topping-zhiding
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-subtraction-jianqu"></span>
            <div class="name">
              subtraction-减去
            </div>
            <div class="code-name">.icon-subtraction-jianqu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suspend-zantingde"></span>
            <div class="name">
              suspend-暂停的
            </div>
            <div class="code-name">.icon-suspend-zantingde
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suspend-zanting"></span>
            <div class="name">
              suspend-暂停
            </div>
            <div class="code-name">.icon-suspend-zanting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sendToBack-zhiyudiceng"></span>
            <div class="name">
              sendToBack-置于底层
            </div>
            <div class="code-name">.icon-sendToBack-zhiyudiceng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sourceMaterial-sucai"></span>
            <div class="name">
              sourceMaterial-素材
            </div>
            <div class="code-name">.icon-sourceMaterial-sucai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-win-maximize-zuidahua"></span>
            <div class="name">
              win-maximize-最大化
            </div>
            <div class="code-name">.icon-win-maximize-zuidahua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-select-xuanzhong"></span>
            <div class="name">
              select-选中
            </div>
            <div class="code-name">.icon-select-xuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wordSpace-zijianju"></span>
            <div class="name">
              wordSpace-字间距
            </div>
            <div class="code-name">.icon-wordSpace-zijianju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-scale-suofang"></span>
            <div class="name">
              scale-缩放
            </div>
            <div class="code-name">.icon-scale-suofang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-win-reduction-huanyuan"></span>
            <div class="name">
              win-reduction-还原
            </div>
            <div class="code-name">.icon-win-reduction-huanyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-win-minimize-zuixiaohua"></span>
            <div class="name">
              win-minimize-最小化
            </div>
            <div class="code-name">.icon-win-minimize-zuixiaohua
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-exchange-duitiao"></use>
                </svg>
                <div class="name">exchange-对调</div>
                <div class="code-name">#icon-exchange-duitiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cropping-caijian1"></use>
                </svg>
                <div class="name">cropping-裁剪</div>
                <div class="code-name">#icon-cropping-caijian1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rotate-xuanzhuan1"></use>
                </svg>
                <div class="name">rotate-旋转</div>
                <div class="code-name">#icon-rotate-xuanzhuan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-rightrotation-youxuanzhuan"></use>
                </svg>
                <div class="name">right rotation-右旋转</div>
                <div class="code-name">#icon-a-rightrotation-youxuanzhuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-fliphorizontal-shuipingfanzhuan"></use>
                </svg>
                <div class="name">flip horizontal-水平翻转</div>
                <div class="code-name">#icon-a-fliphorizontal-shuipingfanzhuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-flipvertical-chuizhifanzhuan"></use>
                </svg>
                <div class="name">flip vertical-垂直翻转</div>
                <div class="code-name">#icon-a-flipvertical-chuizhifanzhuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-drag-tuodong"></use>
                </svg>
                <div class="name">drag-拖动</div>
                <div class="code-name">#icon-drag-tuodong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-nonetwork-wuwangluo"></use>
                </svg>
                <div class="name">no network-无网络</div>
                <div class="code-name">#icon-a-nonetwork-wuwangluo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-refresh-shuaxin"></use>
                </svg>
                <div class="name">refresh-刷新</div>
                <div class="code-name">#icon-refresh-shuaxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-install-anzhuang"></use>
                </svg>
                <div class="name">install-安装</div>
                <div class="code-name">#icon-install-anzhuang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ai"></use>
                </svg>
                <div class="name">ai</div>
                <div class="code-name">#icon-ai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-calendar-rili"></use>
                </svg>
                <div class="name">calendar-日历</div>
                <div class="code-name">#icon-calendar-rili</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-alignBothEnds-liangduanduiqi"></use>
                </svg>
                <div class="name">alignBothEnds-两端对齐</div>
                <div class="code-name">#icon-alignBothEnds-liangduanduiqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrange-zhengli"></use>
                </svg>
                <div class="name">arrange-整理</div>
                <div class="code-name">#icon-arrange-zhengli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-angle-jiaodu"></use>
                </svg>
                <div class="name">angle-角度</div>
                <div class="code-name">#icon-angle-jiaodu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-albumDesign-xiangcesheji"></use>
                </svg>
                <div class="name">albumDesign-相册设计</div>
                <div class="code-name">#icon-albumDesign-xiangcesheji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-addPicture-tianjiatupian"></use>
                </svg>
                <div class="name">addPicture-添加图片</div>
                <div class="code-name">#icon-addPicture-tianjiatupian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-adjust-tiaojiede"></use>
                </svg>
                <div class="name">adjust-调节的</div>
                <div class="code-name">#icon-adjust-tiaojiede</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dunhao-dunhao"></use>
                </svg>
                <div class="name">dunhao-顿号</div>
                <div class="code-name">#icon-dunhao-dunhao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cleanUp-qingchu"></use>
                </svg>
                <div class="name">cleanUp-清除</div>
                <div class="code-name">#icon-cleanUp-qingchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cropping-caijian"></use>
                </svg>
                <div class="name">cropping-裁剪</div>
                <div class="code-name">#icon-cropping-caijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-choice-unselected-weixuan"></use>
                </svg>
                <div class="name">choice-unselected-未选</div>
                <div class="code-name">#icon-choice-unselected-weixuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-choice-selected-xuanzhong"></use>
                </svg>
                <div class="name">choice-selected-选中</div>
                <div class="code-name">#icon-choice-selected-xuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-copy-fuzhi"></use>
                </svg>
                <div class="name">copy-复制</div>
                <div class="code-name">#icon-copy-fuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close-bihexuanze"></use>
                </svg>
                <div class="name">close-闭合选择</div>
                <div class="code-name">#icon-close-bihexuanze</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-background-beijing"></use>
                </svg>
                <div class="name">background-背景</div>
                <div class="code-name">#icon-background-beijing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-contrast-duibide"></use>
                </svg>
                <div class="name">contrast-对比的</div>
                <div class="code-name">#icon-contrast-duibide</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cancel-quxiaode"></use>
                </svg>
                <div class="name">cancel-取消的</div>
                <div class="code-name">#icon-cancel-quxiaode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-checkMark-duigou"></use>
                </svg>
                <div class="name">checkMark-对勾</div>
                <div class="code-name">#icon-checkMark-duigou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cancel-quxiao"></use>
                </svg>
                <div class="name">cancel-取消</div>
                <div class="code-name">#icon-cancel-quxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-amplify-fangda"></use>
                </svg>
                <div class="name">amplify-放大</div>
                <div class="code-name">#icon-amplify-fangda</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bold-jiacu"></use>
                </svg>
                <div class="name">bold-加粗</div>
                <div class="code-name">#icon-bold-jiacu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-centerAligned-juzhongduiqi"></use>
                </svg>
                <div class="name">centerAligned-居中对齐</div>
                <div class="code-name">#icon-centerAligned-juzhongduiqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-back-fanhui"></use>
                </svg>
                <div class="name">back-返回</div>
                <div class="code-name">#icon-back-fanhui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-adjust-tiaojie"></use>
                </svg>
                <div class="name">adjust-调节</div>
                <div class="code-name">#icon-adjust-tiaojie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daub-tumo"></use>
                </svg>
                <div class="name">daub-涂抹</div>
                <div class="code-name">#icon-daub-tumo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-expand-zhankai"></use>
                </svg>
                <div class="name">expand-展开</div>
                <div class="code-name">#icon-expand-zhankai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-display-xianshi"></use>
                </svg>
                <div class="name">display-显示</div>
                <div class="code-name">#icon-display-xianshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-shanchu"></use>
                </svg>
                <div class="name">delete-删除</div>
                <div class="code-name">#icon-delete-shanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-crowd-renqun"></use>
                </svg>
                <div class="name">crowd-人群</div>
                <div class="code-name">#icon-crowd-renqun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dunhao-dunhaotianchong"></use>
                </svg>
                <div class="name">dunhao-顿号填充</div>
                <div class="code-name">#icon-dunhao-dunhaotianchong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-diamond-zuanshi"></use>
                </svg>
                <div class="name">diamond-钻石</div>
                <div class="code-name">#icon-diamond-zuanshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-shanchude"></use>
                </svg>
                <div class="name">delete-删除的</div>
                <div class="code-name">#icon-delete-shanchude</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-contrast-duibi"></use>
                </svg>
                <div class="name">contrast-对比</div>
                <div class="code-name">#icon-contrast-duibi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close-bihe"></use>
                </svg>
                <div class="name">close-闭合</div>
                <div class="code-name">#icon-close-bihe</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dress-fushi"></use>
                </svg>
                <div class="name">dress-服饰</div>
                <div class="code-name">#icon-dress-fushi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-erase-cachu"></use>
                </svg>
                <div class="name">erase-擦除</div>
                <div class="code-name">#icon-erase-cachu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-filter-lvjing"></use>
                </svg>
                <div class="name">filter-滤镜</div>
                <div class="code-name">#icon-filter-lvjing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit-bianji"></use>
                </svg>
                <div class="name">edit-编辑</div>
                <div class="code-name">#icon-edit-bianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-export-daochu"></use>
                </svg>
                <div class="name">export-导出</div>
                <div class="code-name">#icon-export-daochu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-exportList-daochuliebiao"></use>
                </svg>
                <div class="name">exportList-导出列表</div>
                <div class="code-name">#icon-exportList-daochuliebiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-feedBack-yijianfankui"></use>
                </svg>
                <div class="name">feedBack-意见反馈</div>
                <div class="code-name">#icon-feedBack-yijianfankui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-launch-zhankai"></use>
                </svg>
                <div class="name">launch-展开</div>
                <div class="code-name">#icon-launch-zhankai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hide-yincang"></use>
                </svg>
                <div class="name">hide-隐藏</div>
                <div class="code-name">#icon-hide-yincang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-italic-xieti"></use>
                </svg>
                <div class="name">italic-斜体</div>
                <div class="code-name">#icon-italic-xieti</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-increase-tianjia"></use>
                </svg>
                <div class="name">increase-添加</div>
                <div class="code-name">#icon-increase-tianjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-import-daoru"></use>
                </svg>
                <div class="name">import-导入</div>
                <div class="code-name">#icon-import-daoru</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ImageEditing-tupianbianji"></use>
                </svg>
                <div class="name">ImageEditing-图片编辑</div>
                <div class="code-name">#icon-ImageEditing-tupianbianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-image-tupiande"></use>
                </svg>
                <div class="name">image-图片的</div>
                <div class="code-name">#icon-image-tupiande</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hand-shou"></use>
                </svg>
                <div class="name">hand-手</div>
                <div class="code-name">#icon-hand-shou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-history-lishijilu"></use>
                </svg>
                <div class="name">history-历史记录</div>
                <div class="code-name">#icon-history-lishijilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hand-shouzhang"></use>
                </svg>
                <div class="name">hand-手掌</div>
                <div class="code-name">#icon-hand-shouzhang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gesture-shoushi"></use>
                </svg>
                <div class="name">gesture-手势</div>
                <div class="code-name">#icon-gesture-shoushi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gift-liwu"></use>
                </svg>
                <div class="name">gift-礼物</div>
                <div class="code-name">#icon-gift-liwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-home-shouye"></use>
                </svg>
                <div class="name">home-首页</div>
                <div class="code-name">#icon-home-shouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder-wenjianjia"></use>
                </svg>
                <div class="name">folder-文件夹</div>
                <div class="code-name">#icon-folder-wenjianjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-film-yingpian"></use>
                </svg>
                <div class="name">film-影片</div>
                <div class="code-name">#icon-film-yingpian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder-wenjianjiatianchong"></use>
                </svg>
                <div class="name">folder-文件夹填充</div>
                <div class="code-name">#icon-folder-wenjianjiatianchong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-garbageBin-lajixiang"></use>
                </svg>
                <div class="name">garbageBin-垃圾箱</div>
                <div class="code-name">#icon-garbageBin-lajixiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-expression-biaoqing"></use>
                </svg>
                <div class="name">expression-表情</div>
                <div class="code-name">#icon-expression-biaoqing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-funnel-loudou"></use>
                </svg>
                <div class="name">funnel-漏斗</div>
                <div class="code-name">#icon-funnel-loudou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-nextStep-xiayibu"></use>
                </svg>
                <div class="name">nextStep-下一步</div>
                <div class="code-name">#icon-nextStep-xiayibu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-idPhoto-zhengjianzhao"></use>
                </svg>
                <div class="name">idPhoto-证件照</div>
                <div class="code-name">#icon-idPhoto-zhengjianzhao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-move-yidong"></use>
                </svg>
                <div class="name">move-移动</div>
                <div class="code-name">#icon-move-yidong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-locking-suodingzhong"></use>
                </svg>
                <div class="name">locking-锁定中</div>
                <div class="code-name">#icon-locking-suodingzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-minus-jianhao"></use>
                </svg>
                <div class="name">minus-减号</div>
                <div class="code-name">#icon-minus-jianhao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more-gengduo"></use>
                </svg>
                <div class="name">more-更多</div>
                <div class="code-name">#icon-more-gengduo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mask-mianju"></use>
                </svg>
                <div class="name">mask-面具</div>
                <div class="code-name">#icon-mask-mianju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-facialDetection-renlianjiance"></use>
                </svg>
                <div class="name">facialDetection-人脸检测</div>
                <div class="code-name">#icon-facialDetection-renlianjiance</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-intelligentPPresets-zhinengyushe"></use>
                </svg>
                <div class="name">intelligentPPresets-智能预设</div>
                <div class="code-name">#icon-intelligentPPresets-zhinengyushe</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-manage-guanli"></use>
                </svg>
                <div class="name">manage-管理</div>
                <div class="code-name">#icon-manage-guanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-leftJustifying-zuoduiqi"></use>
                </svg>
                <div class="name">leftJustifying-左对齐</div>
                <div class="code-name">#icon-leftJustifying-zuoduiqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lineSpace-hangjianju"></use>
                </svg>
                <div class="name">lineSpace-行间距</div>
                <div class="code-name">#icon-lineSpace-hangjianju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-locking-suoding"></use>
                </svg>
                <div class="name">locking-锁定</div>
                <div class="code-name">#icon-locking-suoding</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-exportGraph-daochutu"></use>
                </svg>
                <div class="name">exportGraph-导出图</div>
                <div class="code-name">#icon-exportGraph-daochutu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liquefying-yehua"></use>
                </svg>
                <div class="name">liquefying-液化</div>
                <div class="code-name">#icon-liquefying-yehua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-loading-jiazai"></use>
                </svg>
                <div class="name">loading-加载</div>
                <div class="code-name">#icon-loading-jiazai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-help-bangzhu"></use>
                </svg>
                <div class="name">help-帮助</div>
                <div class="code-name">#icon-help-bangzhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-intelligentAdjustment-zhinengtiaozheng"></use>
                </svg>
                <div class="name">intelligentAdjustment-智能调整</div>
                <div class="code-name">#icon-intelligentAdjustment-zhinengtiaozheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-portraitBeauty-renxiangmeirongxin"></use>
                </svg>
                <div class="name">portraitBeauty-人像美容新</div>
                <div class="code-name">#icon-portraitBeauty-renxiangmeirongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-profilePicture-touxiang"></use>
                </svg>
                <div class="name">profilePicture-头像</div>
                <div class="code-name">#icon-profilePicture-touxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-plus-jiahao"></use>
                </svg>
                <div class="name">plus-加号</div>
                <div class="code-name">#icon-plus-jiahao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-portraitBeauty-renxiangmeirong"></use>
                </svg>
                <div class="name">portraitBeauty-人像美容</div>
                <div class="code-name">#icon-portraitBeauty-renxiangmeirong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-profilePicture-touxiangde"></use>
                </svg>
                <div class="name">profilePicture-头像的</div>
                <div class="code-name">#icon-profilePicture-touxiangde</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-portraitBeauty-renxiangmeirongdade"></use>
                </svg>
                <div class="name">portraitBeauty-人像美容大的</div>
                <div class="code-name">#icon-portraitBeauty-renxiangmeirongdade</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-noContent-wuneirong"></use>
                </svg>
                <div class="name">noContent-无内容</div>
                <div class="code-name">#icon-noContent-wuneirong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pictureEdit-tupianbianji"></use>
                </svg>
                <div class="name">pictureEdit-图片编辑</div>
                <div class="code-name">#icon-pictureEdit-tupianbianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-placeOnTop-zhiyudingceng"></use>
                </svg>
                <div class="name">placeOnTop-置于顶层</div>
                <div class="code-name">#icon-placeOnTop-zhiyudingceng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-picture-tupiantianchong"></use>
                </svg>
                <div class="name">picture-图片填充</div>
                <div class="code-name">#icon-picture-tupiantianchong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-play-bofang"></use>
                </svg>
                <div class="name">play-播放</div>
                <div class="code-name">#icon-play-bofang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moveUp-shangyi"></use>
                </svg>
                <div class="name">moveUp-上移</div>
                <div class="code-name">#icon-moveUp-shangyi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-picture-tupian"></use>
                </svg>
                <div class="name">picture-图片</div>
                <div class="code-name">#icon-picture-tupian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-overturn-fanzhuan"></use>
                </svg>
                <div class="name">overturn-翻转</div>
                <div class="code-name">#icon-overturn-fanzhuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-member-huiyuan"></use>
                </svg>
                <div class="name">member-会员</div>
                <div class="code-name">#icon-member-huiyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pencil-qianbi"></use>
                </svg>
                <div class="name">pencil-铅笔</div>
                <div class="code-name">#icon-pencil-qianbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-merge-hebing"></use>
                </svg>
                <div class="name">merge-合并</div>
                <div class="code-name">#icon-merge-hebing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-noSky-tiankongwutu"></use>
                </svg>
                <div class="name">noSky-天空无图</div>
                <div class="code-name">#icon-noSky-tiankongwutu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-manageList-guanliliebiao"></use>
                </svg>
                <div class="name">manageList-管理列表</div>
                <div class="code-name">#icon-manageList-guanliliebiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more-gengduode"></use>
                </svg>
                <div class="name">more-更多的</div>
                <div class="code-name">#icon-more-gengduode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-setUp-shezhi"></use>
                </svg>
                <div class="name">setUp-设置</div>
                <div class="code-name">#icon-setUp-shezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-star-xingxing"></use>
                </svg>
                <div class="name">star-星星</div>
                <div class="code-name">#icon-star-xingxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search-sousuo"></use>
                </svg>
                <div class="name">search-搜索</div>
                <div class="code-name">#icon-search-sousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-select-xuanzhongduigou"></use>
                </svg>
                <div class="name">select-选中对勾</div>
                <div class="code-name">#icon-select-xuanzhongduigou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-select-xuanzhongquan"></use>
                </svg>
                <div class="name">select-选中全</div>
                <div class="code-name">#icon-select-xuanzhongquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-select-xuanzhongde"></use>
                </svg>
                <div class="name">select-选中的</div>
                <div class="code-name">#icon-select-xuanzhongde</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rotate-xuanzhuan"></use>
                </svg>
                <div class="name">rotate-旋转</div>
                <div class="code-name">#icon-rotate-xuanzhuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rightAlignment-youduiqi"></use>
                </svg>
                <div class="name">rightAlignment-右对齐</div>
                <div class="code-name">#icon-rightAlignment-youduiqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-questionMark-wenhao"></use>
                </svg>
                <div class="name">questionMark-问号</div>
                <div class="code-name">#icon-questionMark-wenhao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-remarks-beizhu"></use>
                </svg>
                <div class="name">remarks-备注</div>
                <div class="code-name">#icon-remarks-beizhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-regionalProtection-quyubaohu"></use>
                </svg>
                <div class="name">regionalProtection-区域保护</div>
                <div class="code-name">#icon-regionalProtection-quyubaohu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-resetting-zhongzhi"></use>
                </svg>
                <div class="name">resetting-重置</div>
                <div class="code-name">#icon-resetting-zhongzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-preset-yushe"></use>
                </svg>
                <div class="name">preset-预设</div>
                <div class="code-name">#icon-preset-yushe</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-redo-zhongzuo"></use>
                </svg>
                <div class="name">redo-重做</div>
                <div class="code-name">#icon-redo-zhongzuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-radio-unselected-weixuan"></use>
                </svg>
                <div class="name">radio-unselected-未选</div>
                <div class="code-name">#icon-radio-unselected-weixuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-proportion-bili"></use>
                </svg>
                <div class="name">proportion-比例</div>
                <div class="code-name">#icon-proportion-bili</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-radio-select-xuanzhong"></use>
                </svg>
                <div class="name">radio-select-选中</div>
                <div class="code-name">#icon-radio-select-xuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-underline-xiahuaxian"></use>
                </svg>
                <div class="name">underline-下划线</div>
                <div class="code-name">#icon-underline-xiahuaxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-verticalText-shubanwenzi"></use>
                </svg>
                <div class="name">verticalText-竖版文字</div>
                <div class="code-name">#icon-verticalText-shubanwenzi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-withdraw-chehui"></use>
                </svg>
                <div class="name">withdraw-撤回</div>
                <div class="code-name">#icon-withdraw-chehui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wechat-weixin"></use>
                </svg>
                <div class="name">wechat-微信</div>
                <div class="code-name">#icon-wechat-weixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-view-shitu"></use>
                </svg>
                <div class="name">view-视图</div>
                <div class="code-name">#icon-view-shitu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-win-close-guanbi"></use>
                </svg>
                <div class="name">win-close-关闭</div>
                <div class="code-name">#icon-win-close-guanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Template-moban"></use>
                </svg>
                <div class="name">Template-模版</div>
                <div class="code-name">#icon-Template-moban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-unlock-jiesuo"></use>
                </svg>
                <div class="name">unlock-解锁</div>
                <div class="code-name">#icon-unlock-jiesuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-unlock-jiesuode"></use>
                </svg>
                <div class="name">unlock-解锁的</div>
                <div class="code-name">#icon-unlock-jiesuode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-up-xiangshang"></use>
                </svg>
                <div class="name">up-向上</div>
                <div class="code-name">#icon-up-xiangshang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-strikethrough-shanchuxian"></use>
                </svg>
                <div class="name">strikethrough-删除线</div>
                <div class="code-name">#icon-strikethrough-shanchuxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-triangle-sanjiao"></use>
                </svg>
                <div class="name">triangle-三角</div>
                <div class="code-name">#icon-triangle-sanjiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-text-ziti"></use>
                </svg>
                <div class="name">text-字体</div>
                <div class="code-name">#icon-text-ziti</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-topping-zhiding"></use>
                </svg>
                <div class="name">topping-置顶</div>
                <div class="code-name">#icon-topping-zhiding</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-subtraction-jianqu"></use>
                </svg>
                <div class="name">subtraction-减去</div>
                <div class="code-name">#icon-subtraction-jianqu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suspend-zantingde"></use>
                </svg>
                <div class="name">suspend-暂停的</div>
                <div class="code-name">#icon-suspend-zantingde</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suspend-zanting"></use>
                </svg>
                <div class="name">suspend-暂停</div>
                <div class="code-name">#icon-suspend-zanting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sendToBack-zhiyudiceng"></use>
                </svg>
                <div class="name">sendToBack-置于底层</div>
                <div class="code-name">#icon-sendToBack-zhiyudiceng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sourceMaterial-sucai"></use>
                </svg>
                <div class="name">sourceMaterial-素材</div>
                <div class="code-name">#icon-sourceMaterial-sucai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-win-maximize-zuidahua"></use>
                </svg>
                <div class="name">win-maximize-最大化</div>
                <div class="code-name">#icon-win-maximize-zuidahua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-select-xuanzhong"></use>
                </svg>
                <div class="name">select-选中</div>
                <div class="code-name">#icon-select-xuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wordSpace-zijianju"></use>
                </svg>
                <div class="name">wordSpace-字间距</div>
                <div class="code-name">#icon-wordSpace-zijianju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-scale-suofang"></use>
                </svg>
                <div class="name">scale-缩放</div>
                <div class="code-name">#icon-scale-suofang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-win-reduction-huanyuan"></use>
                </svg>
                <div class="name">win-reduction-还原</div>
                <div class="code-name">#icon-win-reduction-huanyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-win-minimize-zuixiaohua"></use>
                </svg>
                <div class="name">win-minimize-最小化</div>
                <div class="code-name">#icon-win-minimize-zuixiaohua</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
